<template>
	<view class="member">
		<view class="center-bg">
			<view class="center-title">
				<view @click="returnPage"><u-icon name="arrow-left" color="#4a4a4a" size="20"></u-icon></view>
				<view>会员中心</view>
				<view></view>
			</view>
			<scroll-view @scroll="scollxFun" :scroll-with-animation="true" style="margin-top: 30rpx;" :scroll-x="true"
				:scroll-left="scrollLeft">
				<view class="member-top">
					<view v-for="(item, index) in vipList" :key="index">
						<view class="top-item" @click="selectPackage(item, index)" :style="{
								backgroundImage: active == index ? 'linear-gradient(to right, #ffc069 0%, #feebc0 100%)' : 'linear-gradient(to right, #fff 0%, #fff 100%)',
							}">
							<view class="item-text">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="vip-list">
			<ai-dub class="list" v-if="active == 0"></ai-dub>
			<ai-paint v-if="active == 1"></ai-paint>
			<ai-write v-if="active == 2"></ai-write>
		</view>
	</view>
</template>

<script>
	import {
		getConfigList
	} from '@/api/wallet.js'
	import aiDub from '@/pages/memberCenter/dub.vue'
	import aiPaint from '@/pages/memberCenter/paint.vue'
	import aiWrite from '@/pages/memberCenter/write.vue'
	export default {
		components: {
			aiDub,
			aiPaint,
			aiWrite
		},
		data() {
			return {
				vipList: [{
					name: 'AI配音VIP'
				}, {
					name: 'AI绘画套餐'
				}, {
					name: 'AI创作套餐'
				}],
				active: 0,
				type: null,
				paintList: [],
				dubList: [],
				writeList: [],
				leftDistance: '-500rpx',
				scrollLeft: 0,
			}
		},
		onReady() {
			if (this.type == 0) {
				this.scrollLeft = 300
			} else if (this.type == 2) {
				this.scrollLeft = 600
			}
		},
		onLoad(param) {
			console.log(param)
			this.active = param.type;
			if (param.type == '0') {
				this.type = 1
				// this.leftDistance = 'translateX(0rpx)'
			} else if (param.type == '1') {
				this.type = 0
				// setTimeout(()=>{
				// 	this.scrollLeft=300
				// },500)
				// this.leftDistance = 'translateX(-500rpx)'
			} else if (param.type == '2') {
				this.type = 2
				// setTimeout(()=>{
				// 	this.scrollLeft=600
				// },500)
				// this.leftDistance = 'translateX(-1000rpx)'
			}
			// this.getList()
		},
		methods: {
			scollxFun(e) {
				let num = e.detail.scrollLeft
				console.log(num,this.active)
				if (num <= 240) {
					if(this.active !=0){
						this.active = 0
						this.getList()
					}
					
				} else if (240 < num && num <= 480) {
					if(this.active !=1){
						this.active = 1
						this.getList()
					}
					
				} else {
					if(this.active !=2){
						this.active = 2
						this.getList()
					}
					

				}
			},
			returnPage() {
				uni.navigateBack()
			},
			selectPackage(item, index) {
				console.log('this.$refs.container;', this.$refs.container)
				if(index==0){
					this.scrollLeft=0
				}
				else if(index==1){
					this.scrollLeft=242
				}else{
					this.scrollLeft=600
				}
				this.active = index
				this.getList()
				console.log(item, index)
			},
			getList() {
				getConfigList({
					type: this.type
				}).then(res => {
					console.log('res', res)
					const {
						data
					} = res.data
					this.paintList = data;
					this.dubList = data;
					this.writeList = data
				})
			},
			navBack() {
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.center-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.center-bg {
		background: url(https://oss.aimlt.com/webui-static/aiyunyi-app/icon/huiyuan.png);
		background-size: 100%;
		height: 300rpx;
		padding-top: calc(var(--status-bar-height) + 20rpx);
	}

	.vip-list {
		position: relative;
		z-index: 2;
	}

	.member {
		// background: #fff;
		height: 100vh;
		.member-top {
			// margin-top: 30rpx;
			display: flex;
			// overflow-x: scroll;
			// background: #feebc0;
			height: 120rpx;

			.top-item {
				width: 500rpx;
				height: 120rpx;
				line-height: 120rpx;
				font-size: #{$main-size};
				border-radius: 20rpx 20rpx 0 0;
				margin: 0 20rpx;
				padding-left: 60rpx;
				font-weight: bold;
				// font-style: italic;

				.item-text {
					background: linear-gradient(to top right, #ff6005 0%, #c54d66 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					display: inline-block;
					font-style: italic;
					width: 100%;
				}

			}
		}

		.list {
			// margin-top: -100rpx;
		}
	}

	.njmdb {
		display: flex;
		align-items: center;
	}
</style>